<template>
  <div class="root-container">
    <el-container class="contentSet-container">
      <!-- 左侧内容 -->
      <el-container class="main">
        <el-header class="header" style="height:50px">
          <el-image
            class="logo"
            :src="require('@/images/login/宇喜logo.png')"
            fit="contain"
          ></el-image>
          <span class="tit">非凡价值由此开始创造</span>
        </el-header>
        <div class="chat">
          <div class="chat-item">
            <el-image
              :src="require('@/images/contentSet/客服.png')"
              fit="contain"
              class="head-pic"
            >
            </el-image>
            <div class="info">
              <p class="name">客服小艾 <span class="time">09:02:31</span></p>
              <div class="message">
                <p>很高兴为您服务，请问有什么可以帮到您？</p>
              </div>
            </div>
          </div>
          <div class="chat-item">
            <el-image
              :src="require('@/images/contentSet/客服.png')"
              fit="contain"
              class="head-pic"
            >
            </el-image>
            <div class="info">
              <p class="name">客服小艾 <span class="time">09:02:31</span></p>
              <div class="message">
                <p>
                  如果不方便，您可以添加一下顾问老师的微信，微信上咨询更方便，而且微信上也有一些内容可以提供给您参考，也可以针对的给您做更加具体的分析。
                </p>
              </div>
            </div>
          </div>
          <div class="chat-item">
            <el-image
              :src="require('@/images/contentSet/客服.png')"
              fit="contain"
              class="head-pic"
            >
            </el-image>
            <div class="info">
              <p class="name">客服小艾 <span class="time">09:02:31</span></p>
              <el-image
                :src="require('@/images/contentSet/qrcode.png')"
                fit="contain"
                class="qrcode"
              >
              </el-image>
            </div>
          </div>
        </div>
        <el-footer class="footer">
          <el-input
            type="textarea"
            class="textarea"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
          <div class="btns">
            <input type="file" class="file" ref="file" style="display:none;">
            <i class="iconfont icon-wenjian" @click="$refs.file.click()"></i>
            <a href="#" class="sendBtn">
              发送
            </a>
          </div>
        </el-footer>
      </el-container>
      <!-- /左侧内容 -->
      <!-- 右侧内容 -->
      <div class="r-content">
        <div class="top">
          <div class="row-a1">
            <p class="tit">宇喜咨询专线</p>
            <span class="tel">400-888-888</span>
          </div>
          <div class="row-a2">
            <el-image
              class="pic"
              :src="require('@/images/contentSet/咨询专线.png')"
              fit="contain"
            >
            </el-image>
            <span class="text">点击图片了解更多资讯</span>
          </div>
        </div>
        <div class="bottom">
          <h3 class="tit">
            常见问题
          </h3>
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
      <!-- /右侧内容 -->
    </el-container>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      textarea: '',
      // 树形控件
      data: [
        {
          label: '宇喜产品有什么？',
          children: [
            {
              label: '宇喜产品有什么？',
              children: [
                {
                  label: '宇喜产品有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '相关案例有什么？',
          children: [
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            },
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '宇喜产品有什么？',
          children: [
            {
              label: '宇喜产品有什么？',
              children: [
                {
                  label: '宇喜产品有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '相关案例有什么？',
          children: [
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            },
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '宇喜产品有什么？',
          children: [
            {
              label: '宇喜产品有什么？',
              children: [
                {
                  label: '宇喜产品有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '相关案例有什么？',
          children: [
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            },
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '宇喜产品有什么？',
          children: [
            {
              label: '宇喜产品有什么？',
              children: [
                {
                  label: '宇喜产品有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '相关案例有什么？',
          children: [
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            },
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '宇喜产品有什么？',
          children: [
            {
              label: '宇喜产品有什么？',
              children: [
                {
                  label: '宇喜产品有什么？'
                }
              ]
            }
          ]
        },
        {
          label: '相关案例有什么？',
          children: [
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            },
            {
              label: '相关案例有什么？',
              children: [
                {
                  label: '相关案例有什么？'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
.root-container {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  .contentSet-container {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 500px;
    .main {
      overflow: hidden;
      background-color: #fff;
      height: auto;
      width: 480px;
      //   顶部
      /deep/ .header {
        padding: 5px 12px;
        height: 50px !important;
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        .logo {
          width: 78px;
          height: 40px;
        }
        .tit {
          padding-top: 10px;
          padding-left: 11px;
          margin: unset;
          font-size: 14px;
          font-family: SourceHanSansSC;
          font-weight: 800;
          color: #333333;
        }
      }
      //   聊天内容
      /deep/ .chat {
        padding: 0 11px;
        width: 495px;
        height: 320px;
        overflow-y: auto;
        background-color: #f7f7f7;
        .chat-item {
          margin: 19px 0 10px;
          text-align: left;
          display: flex;
          .head-pic {
            padding-top: 7px;
            margin-right: 12px;
            width: 30px;
            height: 30px;
          }
          .info {
            .name {
              font-size: 12px;
              color: #999999;
              line-height: 24px;
              margin-bottom: 4px;
            }
            .message {
              padding: 10px 17px 10px 10px;
              width: auto;
              max-width: 379px;
              height: auto;
              background: #ffffff;
              border: 1px solid #dddddd;
              border-radius: 4px;
              p {
                font-size: 14px;
                color: #333333;
                line-height: auto;
              }
            }
          }
        }
      }
      //  输入内容
      /deep/ .footer {
        background-color: #fff;
        z-index: 999;
        border-top: rgba(0, 0, 0, 0.12) solid 1px;
        .textarea {
          padding: 23px 0 0 17px;
          .el-textarea__inner {
            padding: unset;
            border: none;
            outline: none;
            resize: none;
            height: 80px;
          }
        }
        .btns {
          width: 100%;
          height: auto;
          position: absolute;
          bottom: 0;
          .iconfont {
            left: 20px;
            bottom: 20px;
            position: absolute;
            font-size: 20px;
            color: #333333;
          }
          .sendBtn {
            position: absolute;
            bottom: 10px;
            left: 432px;
            display: block;
            background-color: #ff9000;
            width: 40px !important;
            text-decoration: none;
            height: 24px;
            width: 25px;
            font-size: 12px;
            color: #333333;
            line-height: 24px;
          }
        }
      }
    }
    // 右侧区域
    /deep/ .r-content {
      width: 170px;
      height: 500px;
      background: #da251d;
      .top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 10px 0;
        .row-a1 {
          text-align: center;
          width: 150px;
          height: 80px;
          padding: 20px 0;
          margin-bottom: 20px;
          box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
          .tit {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
          }
          .tel {
            margin: unset !important;
            width: 116px;
            height: 14px;
            font-size: 20px;
            font-weight: bold;
            color: #ff9000;
            line-height: 24px;
          }
        }
        .row-a2 {
          .pic {
            width: 150px;
            height: 113px;
            cursor: pointer;
          }
          .text {
            font-size: 12px;
            color: #ffffff;
            line-height: 24px;
            opacity: 0.8;
          }
        }
      }
      .bottom {
        padding: 10px 5px 0 10px;
        text-align: left;
        position: absolute;
        bottom: 0;
        width: 170px;
        height: 224px;
        background-color: #ba1f19;
        .tit {
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
          line-height: 24px;
        }
        .el-tree {
          height: 184px;
          width: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          background-color: unset;
          font-size: 14px;
          color: #ffffff;
          line-height: 24px;
          opacity: 0.8;
        }
        //滚动条样式
        ::-webkit-scrollbar {
          width: 4px;
        }
        ::-webkit-scrollbar-track {
          -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
          border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background:rgba(255, 255, 255, 0.5);
          -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
        }
        ::-webkit-scrollbar-thumb:window-inactive {
          background: #fff;
        }
      }
    }
  }
}
</style>
